<template>
  <div class="app-container">
    <el-steps :active="stepsActive" align-center>
      <el-step title="短信提交"></el-step>
      <el-step title="提交结果"></el-step>
    </el-steps>

    <ECard rightTitle="短信接收人" leftTitle="短信内容" v-if="stepsActive == 1">
      <template #left>
        <div class="da">
          <el-button
            type="primary"
            @click="openDlFn('groupSelectEdit')"
            size="small"
            >从分组选择</el-button
          >
          <el-button @click="openDlFn('selectContactEdit')" size="small"
            >从联系人选择</el-button
          >
        </div>
        <ETable
          style="margin-top: 10px"
          ref="ETable"
          :height="350"
          :titleObj="titleObj"
          :defaultData="defaultData"
          :ifShowPagination="false"
          operateWidth="80"
        >
          <template v-slot="{ scope }">
            <el-button @click="rightDelete(scope)" type="text" size="small"
              >移除</el-button
            >
          </template>
        </ETable>
      </template>
      <template #right>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
          autosize
          :autosize="{ minRows: 20 }"
        >
        </el-input>
        <div class="daj" style="margin-top: 10px">
          <el-button type="primary" @click="submitFn" size="small"
            >提交</el-button
          >
        </div>
      </template>
    </ECard>
    <div v-else>
      <ETable
        style="margin-bottom: 10px"
        ref="ETable"
        :height="240"
        :titleObj="titleObjTwo"
        :defaultData="defaultData"
        :ifShowPagination="false"
      >
      </ETable>
      <div class="daj">
        <el-button type="primary" @click="goBach" size="small"
          >再发一条</el-button
        >
      </div>
    </div>
    <groupSelectEdit ref="groupSelectEdit" @callBackFn="callBackFn" />
    <selectContactEdit ref="selectContactEdit" @callBackFn="callBackFn" />
  </div>
</template>

<script>
import ETable from "@/components/ETable";
import Eselect from "@/components/Eselect";
import ECard from "./card.vue";
import groupSelectEdit from "./dialog/groupSelectEdit.vue";
import selectContactEdit from "./dialog/selectContactEdit.vue";
import { unique, fd } from "@/utils";
import { putSendByConstacts } from "@/api/smsManage/shortMessageSend";
export default {
  name: "shortMessageSend",
  components: {
    ETable,
    ECard,
    Eselect,
    groupSelectEdit,
    selectContactEdit,
  },
  data() {
    return {
      // 步骤条的步数
      stepsActive: 1,
      // ------------------------------ 左侧 ------------------------------
      textarea: "",

      // ------------------------------ 右侧 ------------------------------
      defaultData: [],
      titleObj: [
        { prop: "contactsName", label: "联系人", width: "120" },
        { prop: "contactsMobile", label: "手机号", width: "120" },
        { prop: "groupName", label: "分组" },
      ],
      titleObjTwo: [
        { prop: "contactsName", label: "联系人", width: "120" },
        { prop: "contactsMobile", label: "手机号", width: "120" },
        { prop: "groupName", label: "分组", width: "160" },
        {
          prop: "remark",
          label: "提交结果",
          formatter: (scope) => this.fmRemark(scope),
        },
      ],
    };
  },
  methods: {
    // 分组传递出来的方法
    callBackFn(val) {
      this.defaultData = unique([...this.defaultData, ...val], "id");
    },
    // 打开弹框方法
    openDlFn(name) {
      this.$refs[name].open();
    },
    // 移除表格数据
    async rightDelete(scope) {
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        // 删除表格数据
        this.defaultData = this.defaultData.filter(
          (item) => item.id != scope.id
        );
      }
    },
    // 提交
    async submitFn() {
      if (!this.textarea) return this.$message.error("请输入短信内容");
      if (!this.defaultData.length) return this.$message.error("请选择联系人");
      let t = await this.$confirm("是否执行提交操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await putSendByConstacts(
          fd({
            content: this.textarea,
            contactsIdsStr: this.defaultData.map((item) => item.id).join(","),
          })
        );
        if (res.data && res.data.bcode == 0) {
          this.textarea = "";
          this.defaultData.forEach((item) => {
            item.remark = res.data.bdata[item.id];
          });
          this.stepsActive = 2;
        }
      }
    },
    // 返回第一步
    goBach() {
      this.stepsActive = 1;
      this.defaultData = [];
    },
    fmRemark(scope) {
      return (
        <span style={{ color: !scope.remark ? "black" : "red" }}>
          {scope.remark ? scope.remark : "发送成功"}
        </span>
      );
    },
  },
};
</script>

<style scoped lang="scss"></style>
